<template>
    <div :class="discountClass" @click="click">
        <div class="discount-item-content">
            <div v-if="!canUse" class="cant-use">{{text}}</div>
            <div v-if="mode === 4" class="price-line">
                <div class="price"><span>{{(price * 10).toFixed(2) - 0}}</span> 折</div>
                <div class="price-condition">{{quotaRule}}</div>
            </div>
            <div v-else class="price-line">
                <div class="price">￥<span>{{price}}</span></div>
                <div class="price-condition">{{quotaRule}}</div>
            </div>
            <div class="info">
                <div class="desc-line text-overflow title-color">{{name}}</div>
                <div class="time-line">{{timeValue}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@common/format';
import ModeMixin from '@common/mixin';
export default {
    name: 'DiscountItem',
    mixins: [ModeMixin],
    components: {},
    props: {
        name: String,
        price: Number,
        startTime: Number,
        quota: Number,
        endTime: Number,
        voucherType: [Number, String],
        voucherTypeValue: String,
        type: {
            type: String,
            default: 'card',  // card,list
        },
        isDisable: {
            type: Boolean,
            default: false, // 是否不可用
        },
        canUse: {
            type: Boolean,
            default: true,
        },
        isInvalid: {
            type: Boolean,
            default: false,
        },
        text: {
            type: String,
            default: '本店不可用',
        },
    },
    computed: {
        discountClass() {
            const { type, voucherType, isDisable, isInvalid, mode } = this.$props;
            const arr = ['orange', 'yellow', 'blue', 'purple'];
            return `discount-item discount-type-${type} ${mode} discount-style-${arr[voucherType-1]} ${isDisable ? 'disable' : ''}${isInvalid ? ' is-invalid' : ''}`;
        },
        timeValue() {
            const { startTime, endTime } = this.$props;
            if (!startTime || !endTime) {
                return '';
            }
            return `${formatDate(startTime)} 至 ${formatDate(endTime)}`;
        },
        quotaRule() {
            const { quota, voucherType, voucherTypeValue } = this.$props;
            if (voucherType === 1) {
                return quota > 0 ? `满${quota}可用` : '无门槛';
            } else {
                return voucherTypeValue;
            }
        },
    },
    methods: {
        click() {
            this.$emit('click');
        },
    },
};
</script>

<style lang="less" scoped>
    @discount-item-width: 200px;
    @discount-item-height: 105px;
    @border-color: #f36164;
    .discount-item {
        position: relative;
        .border-radius();
        color: @white;
        overflow: hidden;
        .mode-white();
        &.discount-style-orange {
            .linear-right(#FFA061, #F96C45);
        }
        &.discount-style-yellow {
            .linear-right(#FCD254, #FFAC2B);
        }
        &.discount-style-blue {
            .linear-right(#5B81FF, #1D4ADF);
        }
        &.discount-style-purple {
            .linear-right(#A43BD6, #745DDC);
        }
        &.discount-type-list {
            &.disable {
                background-image: none;
                .price-line,
                .time-line,
                .desc-line {
                    color: @gray-dark !important;
                }
                .discount-item-content {
                    background-color: rgba(153,153,153,0.08) !important;
                    border-color: @gray-aaa !important;
                    .info {
                        border-left-color: @gray-aaa !important;
                        &::before, &::after {
                            border-color: @gray-aaa !important;
                        }
                    }
                }
            }
        }
        &.is-invalid {
            opacity: 0.6;
        }
        &.discount-type-list {
            background-image: none;
            &.discount-style-orange {
                .price-line {
                    color: @red;
                }
                .discount-item-content {
                    background-color: rgba(222,32,34,0.04);
                    border: 1px solid @border-color;
                    border-radius: @border-radius;
                    .info {
                        border-left-color: @border-color;
                        &::before, &::after {
                            border-color: @border-color;
                        }
                    }
                }
            }
            &.discount-style-yellow,
            &.discount-style-blue,
            &.discount-style-purple {
                .price-line {
                    color: #E76915;
                }
                .discount-item-content {
                    background-color: rgba(231,105,21,0.04);
                    border: 1px solid @border-color;
                    border-radius: @border-radius;
                    .info {
                        border-left-color: @border-color;
                        &::before, &::after {
                            border-color: @border-color;
                        }
                    }
                }
            }
        }
        &.discount-type-card {
            background-image: none;
            &.discount-style-orange {
                .price-line {
                    color: @red;
                }
                .discount-item-content {
                    background-color: rgba(222,32,34,0.04);
                    border: 1px solid #f36164;
                    border-radius: @border-radius;
                    .time-line {
                        border-top-color: #f36164;
                        &::before, &::after {
                            border-color: #f36164;
                        }
                    }
                }
            }
            &.discount-style-yellow,
            &.discount-style-blue,
            &.discount-style-purple {
                .price-line {
                    color: #E76915;
                }
                .discount-item-content {
                    background-color: rgba(231,105,21,0.04);
                    border: 1px solid #E76915;
                    border-radius: @border-radius;
                    .time-line {
                        border-top-color: #E76915;
                        &::before, &::after {
                            border-color: #E76915;
                        }
                    }
                }
            }
        }
        .cant-use {
            position: absolute;
            top: 0;
            right: 0;
            .font-size-sm();
            background-color: @gray;
            color: @white;
            .p-h(@gap);
            border-bottom-left-radius: @member-card-border-raduis;
        }
        &.discount-type-card {
            display: inline-block;
            .m-l(@gap-md);
            width: @discount-item-width;
            // height: @discount-item-height;
            .discount-item-content {
                .flex-column-center();
                .p(@gap-sm);
                > div {
                    width: 100%;
                }
                .price-line {
                    .flex-row-between();
                    .price {
                        .font-size-sm();
                        > span {
                            .font-size(24);
                            font-weight: @font-weight-bold;
                        }
                    }
                    .price-condition {
                        .font-size();
                        .flex-column-center();
                    }
                }
                .desc-line {
                    .font-size-sm();
                    color: @text-color;
                    .m-v(@gap-sm);
                    text-indent: @gap-sm;
                }
                .time-line {
                    .font-size-sm();
                    // text-indent: @gap-sm;
                    .m-h(@gap-sm);
                    .p-t(@gap-sm);
                    color: @gray-dark;
                    border-top-width: 1px;
                    border-top-style: dashed;
                    position: relative;
                    &::before, &::after {
                        content: '';
                        position: absolute;
                        width: @gap;
                        height: @gap;
                        background-color: @white;
                        top: -@gap-sm;
                        left: -16px;
                        border-radius: @gap;
                        border-style: solid;
                        border-width: 1px;
                    }
                    &::after {
                        right: -16px;
                        left: auto;
                    }
                }
            }
        }
        &.black {
            .info {
                &::before, &::after {
                    background-color: @black-bg-color !important;
                }
            }
        }
        &.discount-type-list {
            // .p(@gap-md);
            .discount-item-content {
                .flex();
                .price-line {
                    width: 20%;
                    .flex-column-center();
                    .p-h(@gap-md);
                    .price > span {
                        .font-size(27px);
                        font-weight: @font-weight-bold;
                    }
                    .price-condition {
                        .font-size-sm();
                        .flex-column-center();
                    }
                }
                .info {
                    flex: 1;
                    .flex();
                    flex-direction: column;
                    justify-content: center;
                    .p-h(@gap-md);
                    .p-v(@gap);
                    border-left: 1px dashed rgba(255, 255, 255, .3);
                    position: relative;
                    &::before, &::after {
                        content: '';
                        position: absolute;
                        width: @gap;
                        height: @gap;
                        background-color: @white;
                        top: -@gap-sm;
                        left: -(@gap-sm + 1);
                        border-radius: @gap;
                        border-style: solid;
                        border-width: 1px;
                    }
                    &::after {
                        top: auto;
                        bottom: -@gap-sm;
                    }
                }
                .desc-line {
                    .font-size();
                    color: @text-color;
                }
                .time-line {
                    .m-t(@gap);
                    .font-size-sm();
                    color: @gray-dark;
                }
            }
        }
    }
</style>

